<template>
    <div class="login-container">
        <div class="login-form">
            <h2 class="login-title">股票系统注册</h2>
            <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="auto">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="large" style="width: 100%"
                        @click="handleRegister">注册</el-button>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-text type="primary" @click="toLogin" style="cursor: pointer;">已有账号？去登录</el-text>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { post } from '@/utils/request';
import { md5 } from '@/utils/utils';

const registerForm = ref({
    username: 'aaa',
    email: '863458300@qq.com',
    password: '123456',
    confirmPassword: '123456'
});
const registerFormRef = ref()
const registerRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.value.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
};

const router = useRouter();

const handleRegister = async (formRef) => {
    if (!registerFormRef) {
        return;
    }
    await registerFormRef.value.validate((valid, fields) => {
        if (valid) {
            // 对密码进行MD5加密
            const encryptedForm = {
                ...registerForm.value,
                password: md5(registerForm.value.password)
            };
            post('/register', encryptedForm).then(res => {
                ElMessage.success('注册成功');
                toLogin();
            })
        } else {
            console.log('error submit!', fields)
        }
    })
};

const toLogin = () => {
    router.push('/login');
};
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f7fa;
}

.login-form {
    width: 400px;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #303133;
}
</style>